<script lang="ts">
import { defineComponent, ref } from "vue";

// 为了实现 TS 的类型推导，需要使用 defineComponent 函数
export default defineComponent({
  props: {
    color: {
      type: String,
      default: "red",
    },
  },
  // 编写组件属性
  setup() {
    // data: 可响应数据
    const count = ref(0);
    const x: string | number = 1;

    return {
      count,
      x,
    };
  },
});
</script>
<template>
  <button class="btn-counter" @click="count++">
    you click {{ count }} times
  </button>
  <div>{{ x.toFixed(2) }}</div>
</template>
<style>
.btn-counter {
  background: v-bind(color);
  color: #fff;
}
</style>
